<template>
  <div>
    <div class="item_wrap">
      <div class="fa">
        <p class="receiveItem_title">发件人信息</p>
        <p class="receiveItem_">地址：{{ detail.sendAddress.address }}</p>
        <p class="receiveItem_">姓名：{{ detail.sendAddress.name }}</p>
        <p class="receiveItem_">联系方式：{{ detail.sendAddress.phone }}</p>
      </div>
      <div class="shou">
        <p class="receiveItem_title">收件人信息</p>
        <p class="receiveItem_">地址：{{ detail.receiveAddress.address }}</p>
        <p class="receiveItem_">姓名：{{ detail.receiveAddress.name }}</p>
        <p class="receiveItem_">联系方式：{{ detail.receiveAddress.phone }}</p>
      </div>
      <div class="goods">
        <p class="receiveItem_title">货物信息</p>
        <p class="receiveItem_">名称：{{ detail.type }}</p>
        <p class="receiveItem_">预估重量：{{ detail.weight }} kg</p>
        <p class="receiveItem_">
          体积：{{ detail.length }}*{{ detail.width }}*{{ detail.height }} m³
        </p>
      </div>
      <div class="list">
        <p class="receiveItem_title">订单信息</p>
        <p class="receiveItem_">订单号：{{ detail.id }}</p>
        <p class="receiveItem_">运费：{{ detail.value }} 元</p>
        <p class="receiveItem_">下单时间：{{ detail.orderTime }}</p>
      </div>
    </div>
    <div class="state">
      <p class="receiveItem_title">订单状态</p>
      <div class="receiveItem_state">
        <w-timeline class="time_item">
          <w-timeline-item
            v-for="(item, index) in activity"
            :key="index"
            size="normal"
            :timestamp="activity.timestamp"
          >
            {{ item.detail }}<br />
            {{ item.time }}
          </w-timeline-item>
        </w-timeline>
        <!-- <div class="address_name" style="width: 240px">
          <el-amap
            vid="amap"
            :plugin="plugin"
            :center="center"
          >
          </el-amap>
          <div class="toolbar">
            <span v-if="loaded">
              location: lng = {{ lng }} lat = {{ lat }}
            </span>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Item",
  props: ["detail", "activity"],
  // data() {
  //   return {
  //     num:''
  //   }
  // },
  // created(){
  //   this.getRandomInt(12,20)
  // },
  // methods:{
  //   getRandomInt(min, max) {
  //      this.num = Math.floor(Math.random() * (max - min + 1)) + min
  //   },
  // }
  // data() {
  //   const self = this;
  //   return {
  //     center: [121.59996, 31.197646],
  //     lng: 0,
  //     lat: 0,
  //     loaded: false,
  //     plugin: [
  //       {
  //         enableHighAccuracy: true, //是否使用高精度定位，默认:true
  //         timeout: 100, //超过10秒后停止定位，默认：无穷大
  //         maximumAge: 0, //定位结果缓存0毫秒，默认：0
  //         convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
  //         showButton: true, //显示定位按钮，默认：true
  //         buttonPosition: "RB", //定位按钮停靠位置，默认：'LB'，左下角
  //         showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
  //         showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
  //         panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
  //         zoomToAccuracy: true, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
  //         extensions: "all",
  //         pName: "Geolocation",
  //         events: {
  //           init(o) {
  //             // o 是高德地图定位插件实例
  //             o.getCurrentPosition((status, result) => {
  //               console.log(result);
  //               if (result && result.position) {
  //                 self.lng = result.position.lng;
  //                 self.lat = result.position.lat;
  //                 self.center = [self.lng, self.lat];
  //                 self.loaded = true;
  //                 self.$nextTick();
  //               }
  //             });
  //           },
  //         },
  //       },
  //     ],
  //   };
  // },
};
</script>

<style>
.item_wrap {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;
}
.fa,
.shou,
.goods,
.list {
  flex: 50%;
}
.goods {
  margin-bottom: 5px;
}
.receiveItem_title {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 18px;
}
.receiveItem_ {
  margin-bottom: 10px;
  font-size: 14px;
  margin-bottom: 18px;
}
.receiveItem_state {
  display: flex;
  flex-direction: row;
  margin-top: 20px;
  overflow-y: scroll;
  height: 210px;
}
.time_item {
  margin-top: 10px;
  font-size: 14px;
}
</style>
